import React, { Component } from 'react';
import { Card, Button, Table, Form, Select, Modal, message } from 'antd';
import ajax from '../../utils/ajax';

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowOpenCity: false,
      list: [],
      Pagination: {
        current: '1',
        pageSize: '10',
        pageSizeOptions: ['1', '5', '10', '30'],
        showQuickJumper: true,
        showSizeChanger: true
      }
    };
  }

  componentDidMount() {
    this.reqList();
  }

  reqList() {
    ajax.get('/open_city').then(res => {
      let result = res.result;
      let list = result.list.map((item, index) => {
        item.key = index;
        return item;
      });

      this.setState({
        list: list,
        Pagination: {
          current: result.page,
          pageSize: result.page_size,
          total: result.total_count,
          showTotal: () => {
            return `共${result.total_count}条`;
          },
          onChange: current => {
            this.getDataList(current);
          }
        }
      });
    });
  }

  openCity = () => {
    this.setState({
      isShowOpenCity: true
    });
  };

  render() {
    const columns = [
      {
        title: '城市ID',
        dataIndex: 'id'
      },
      {
        title: '城市名称',
        dataIndex: 'name'
      },
      {
        title: '用车模式',
        dataIndex: 'mode',
        render(mode) {
          return mode === 1 ? '停车点' : '禁停区';
        }
      },
      {
        title: '营运模式',
        dataIndex: 'op_mode',
        render(op_mode) {
          return op_mode === 1 ? '自营' : '加盟';
        }
      },
      {
        title: '授权加盟商',
        dataIndex: 'franchisee_name'
      },
      {
        title: '城市管理员',
        dataIndex: 'city_admins'
        /* render(arr) {
          return arr
            .map(item => {
              return item.user_name;
            })
            .join(',');
        } */
      },
      {
        title: '城市开通时间',
        dataIndex: 'open_time'
      },
      {
        title: '操作时间',
        dataIndex: 'update_time'
      },
      {
        title: '操作人',
        dataIndex: 'sys_user_name'
      }
    ];

    return (
      <div>
        <Card>
          <FilterForm />
        </Card>
        <Card style={{ marginTop: 10 }}>
          <Button type="primary" onClick={this.openCity}>
            开通城市
          </Button>
        </Card>

        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          />
        </div>
        <Modal
          title="开通城市"
          visible={this.state.isShowOpenCity}
          onCancel={() => {
            this.setState({
              isShowOpenCity: false
            });
          }}
          onOk={() => {
            this.setState({
              isShowOpenCity: false
            });
          }}
        >
          <OpenCityForm
            wrappedComponentRef={inst => {
              this.cityForm = inst;
            }}
          />
        </Modal>
      </div>
    );
  }
}

// UI组件使用的纯函数
class FilterForm extends Component {
  handleSearch = () => {
    let searchInfo = this.props.form.getFieldsValue();
    message.success(JSON.stringify(searchInfo));
  };

  reSet = () => {
    this.props.form.resetFields();
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form layout="inline">
        <FormItem label="城市">
          {getFieldDecorator('city_id')(
            <Select style={{ width: 100 }} placeholder="全部">
              <Option value="">全部</Option>
              <Option value="1">北京市</Option>
              <Option value="2">天津市</Option>
              <Option value="3">深圳市</Option>
            </Select>
          )}
        </FormItem>

        <FormItem label="用车模式">
          {getFieldDecorator('mode')(
            <Select style={{ width: 120 }} placeholder="全部">
              <Option value="">全部</Option>
              <Option value="1">指定停车点模式</Option>
              <Option value="2">禁停区模式</Option>
            </Select>
          )}
        </FormItem>
        <FormItem label="营运模式">
          {getFieldDecorator('op_mode')(
            <Select style={{ width: 80 }} placeholder="全部">
              <Option value="">全部</Option>
              <Option value="1">自营</Option>
              <Option value="2">加盟</Option>
            </Select>
          )}
        </FormItem>
        <FormItem label="加盟商授权状态">
          {getFieldDecorator('auth_status')(
            <Select style={{ width: 100 }} placeholder="全部">
              <Option value="">全部</Option>
              <Option value="1">已授权</Option>
              <Option value="2">未授权</Option>
            </Select>
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            style={{ margin: '0 20px' }}
            onClick={this.handleSearch}
          >
            查询
          </Button>
          <Button onClick={this.reSet}>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

FilterForm = Form.create({})(FilterForm);

class OpenCityForm extends Component {
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 }
    };

    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <FormItem label="开通城市">
          {getFieldDecorator('city_id', { initialValue: '1' })(
            <Select style={{ width: 100 }}>
              <Option value="">全部</Option>
              <Option value="1">北京市</Option>
              <Option value="2">天津市</Option>
            </Select>
          )}
        </FormItem>
        <FormItem label="营运模式" {...formItemLayout}>
          {getFieldDecorator('op_mode', {
            initialValue: '1'
          })(
            <Select style={{ width: 100 }}>
              <Option value="1">自营</Option>
              <Option value="2">加盟</Option>
            </Select>
          )}
        </FormItem>
        <FormItem label="用车模式" {...formItemLayout}>
          {getFieldDecorator('use_mode', {
            initialValue: '1'
          })(
            <Select style={{ width: 100 }}>
              <Option value="1">指定停车点</Option>
              <Option value="2">禁停区</Option>
            </Select>
          )}
        </FormItem>
      </Form>
    );
  }
}
OpenCityForm = Form.create({})(OpenCityForm);
